<template>
  <el-tabs type="border-card"  v-model="tabName" @tab-click="request">
    <!-- 未注销显示内容 -->
    <el-tab-pane label="未注销" name="uncancelled">
      <SearchAdd :openAddDialog='openAddDialog' :show="0" @send-data="search" :cancellation='cancellation' :flag="0"></SearchAdd>
      <el-table
        row-key="date"
        ref="filterTable,multipleTable"
        tooltip-effect="dark"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        @row-click="test"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="patientId" label="ID" width="200px"></el-table-column>
        <el-table-column prop="patientName" label="就诊人姓名" width="260px"> </el-table-column>
        <el-table-column prop="phoneNumber" label="就诊人手机号" width="260px"> </el-table-column>
        <el-table-column prop="idCardId" label="证件类型" width="260px"> </el-table-column>
        <el-table-column prop="idCardNumber" label="就诊人有效证件号" width="260px"> </el-table-column>
        <el-table-column label="操作" width="180">
          <el-button type="primary" @click="openUpdateDialog">修改</el-button>
          <el-button type="danger" @click="cancellation">注销</el-button>
        </el-table-column>
      </el-table>
    </el-tab-pane>
    <!-- 已注销显示内容 -->
    <el-tab-pane label="已注销"  name="cancelled">
      <SearchAdd :flag="1" :show="0" @send-data="search"></SearchAdd>
      <el-table
          ref="filterTable,multipleTable"
          tooltip-effect="dark"
          :data="tableData"
          style="width: 100%"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="patientId" label="ID" width="200px"></el-table-column>
        <el-table-column prop="patientName" label="就诊人姓名" width="260px"> </el-table-column>
        <el-table-column prop="phoneNumber" label="就诊人手机号" width="260px"> </el-table-column>
        <el-table-column prop="idCardId" label="证件类型" width="260px"> </el-table-column>
        <el-table-column prop="idCardNumber" label="就诊人有效证件号" width="260px"> </el-table-column>
      </el-table>
    </el-tab-pane>
  </el-tabs>

  <!-- 弹窗 -->
  <el-dialog :title="title" v-model="dialogFormVisible" width="30%">
    <!-- 添加医师信息 -->
    <el-form 
      ref="patient" 
      :model="patient"
      :rules="rules"
      label-width="120px"
      v-if="isShow?true:false"
    >
      <el-form-item label="就诊人姓名" prop="patientName">
        <el-input v-model="patient.patientName"></el-input>
      </el-form-item>
      <el-form-item label="就诊人手机号" prop="phoneNumber">
        <el-input 
        v-model="patient.phoneNumber"
        oninput="value=value.replace(/[^\d]/g,'');if(value.length > 11)value=value.slice(0,11)"
        ></el-input>
      </el-form-item>
      <el-form-item label="证件类型" prop="idCardId">
        <el-select v-model="patient.idCardId" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      </el-form-item>
      <el-form-item label="有效证件号" prop="idCardNumber">
        <el-input v-model="patient.idCardNumber"
        oninput="value=value.replace(/(^[1-9]\\d{5}(18|19|([23]\\d))\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$)|(^[1-9]\\d{5}\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{2}$)/,'');if(value.length > 18)value=value.slice(0,18)"
        ></el-input>
      </el-form-item>
    </el-form>
    <!-- 修改信息 -->
    <el-form 
      ref="patient" 
      :model="patient"
      :rules="rules"
      label-width="120px"
      v-if="isShow?false:true"
    >
      <el-form-item label="就诊人姓名" prop="patientName">
        <el-input v-model="patient.patientName"></el-input>
      </el-form-item>
      <el-form-item label="就诊人手机号" prop="phoneNumber">
        <el-input 
        v-model="patient.phoneNumber"
        oninput="value=value.replace(/[^\d]/g,'');if(value.length > 11)value=value.slice(0,11)"
        ></el-input>
      </el-form-item>
      <el-form-item label="证件类型" prop="idCardId">
        <el-select v-model="patient.idCardId" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      </el-form-item>
      <el-form-item label="有效证件号" prop="idCardNumber">
        <el-input v-model="patient.idCardNumber"
        oninput="value=value.replace(/(^[1-9]\\d{5}(18|19|([23]\\d))\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$)|(^[1-9]\\d{5}\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{2}$)/,'');if(value.length > 18)value=value.slice(0,18)"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel('patient')">取 消</el-button>
        <el-button type="primary" @click="onSubmit('patient')">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import SearchAdd from '@/components/SearchAdd.vue';
import {getAllPatients,addPatient,deletePatient,updatePatient} from '@/api/secondary_page/patient_manage'
import { ElMessage } from 'element-plus'
export default {
    name:"PagePatientManage",
     data() {
      return {
        title:'',
        tabName:'uncancelled',
        isShow:false,//添加or修改
        flag:1,
        dialogFormVisible:false,//弹窗开关
        tableData: [],//后台返回数据
        multipleSelection: [],//多选选中行数据
        options: [
          {
            value: '居民身份证',
            label: '居民身份证',
          },
          {
            value: '护照',
            label: '护照',
          },
          {
            value: '港澳居民来往内地通行证',
            label: '港澳居民来往内地通行证',
          },
          {
            value: '台湾居民来往大陆通行证',
            label: '台湾居民来往大陆通行证',
          },
        ],
        patient:{//就诊人对象
            patientId:'',
            patientName:'',
            phoneNumber:'',
            idCardId:'',
            idCardNumber:'',
            flag:0
        },
        rules: {//验证规则
          patientName: [
            { required: true, message: '请输入就诊人姓名', trigger: 'blur' },
            {
              min: 2,
              message: '长度最少 2 个字符',
              trigger: 'blur',
            },
          ],
           phoneNumber: [
            { required: true, message: '手机号不能为空'},
            {
              min: 11,
              message: '手机号格式不正确',
              trigger: 'blur',
            },
          ],
          idCardId: [
            { required: true, message: '请选择证件类型', trigger: 'blur' },
            {
              min: 2,
              message: '长度最少 2 个字符',
              trigger: 'blur',
            },
          ],
         
           idCardNumber: [
            { required: true, message: '证件号不能为空',trigger: 'blur'},
            {  
              min:18,
              message: '证件号格式有误',
              trigger: 'blur',
            },
          ],
        }
      }
    },
     methods:{
      //获取医师信息请求封装
      getAllPatient(){
        getAllPatients(this.patient).then(
            response =>{
              this.tableData = response;
              console.log(this.tableData)
            }
          )
        },
        //获取医师信息请求处理
        request(tab){
          this.patient={}
          if(tab.props.name=='uncancelled'){
            this.patient.flag = 0
          }else{
            this.patient.flag = 1
          }
          this.getAllPatient()
        },
       //多选函数
       handleSelectionChange(val) {
          this.multipleSelection = val
        },
        //弹窗开关
        openDialog(){
          this.dialogFormVisible = !this.dialogFormVisible
        },
        //打开添加弹窗
        openAddDialog() {
          this.openDialog()
          this.isShow = true
          this.title = '添加就诊人信息'
        },
        //打开修改弹窗
        openUpdateDialog(row) {
          this.openDialog()
          this.isShow = false
          this.title = '修改就诊人信息'
          this.test(row);
        },
        //获取el-table选中行数据
        test(row){
          this.patient = row
          if(this.multipleSelection.length == 0){
            this.multipleSelection.push(row)
          }else{
            this.multipleSelection.forEach((item)=>{
              if(item.patientId != row.patientId ){
                this.multipleSelection.push(row)
              }
            })
          }
        },
        //格式化数据
        formatter(row){
          let arr = []
          row.requirementTypes.forEach((item, index)=>{
            if (index > 2) {
              return
            }
            arr.push(item.typeName);
          })
          return arr.join(',')
        },
        //弹窗取消函数
        cancel(formName){
          this.openDialog();
          this.$refs[formName].resetFields()
          ElMessage('操作已取消')
          this.patient = {}
          this.patient.flag=0
          this.getAllPatient()
        },
        //提交函数
        onSubmit(formName) {
          console.log(this.patient)
          this.$refs[formName].validate((valid)=>{
            if (valid) {
              if(this.isShow){
                addPatient(this.patient).then(
                  response=>{
                    console.log(response)
                    if(response == 0){
                      ElMessage.error('添加失败')
                    }else if(response == 1){
                      ElMessage.success({
                        message: '添加成功',
                        type: 'success',
                      })
                      this.$refs[formName].resetFields()
                    }
                  }
                ) 
              }else{
                updatePatient(this.patient).then(
                  response=>{
                    console.log(response)
                    if(response == 0){
                      ElMessage.error('修改失败')
                    }else if(response == 1){
                      ElMessage.success({
                        message: '修改成功',
                        type: 'success',
                      })
                    }
                  }
                )
              }
              this.openDialog()
            } else {
              ElMessage.error('验证未能通过或信息未填写完整')
              return false
            }
          })
        },
        //注销函数
        cancellation() {
        this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.multipleSelection.forEach((item)=>{
              deletePatient(item.patientId).then(
                response => {
                  if(response == "删除成功"){
                    this.$message({
                      type: 'success',
                      message: '删除成功!',
                    })
                    this.patient = {}
                    this.patient.flag = 0
                    this.getAllPatient();
                  }else{
                      ElMessage.error('删除失败')
                  }
                }
              )
            })
            this.multipleSelection = []
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除',
            })
          })
        },
        filterHandler(value, row, column) {
          const property = column['property']
          return row[property] === value
        },
        //搜索函数
       search(input,type,o){
          if(o){
            if(isNaN(input)){
              this.patient.patientName = input
              this.patient.phoneNumber = input
              this.patient.patientId = input
            }else{
              this.patient.patientId = input
            }
            this.getAllPatient()
           }
          else{ 
            getAllPatients(this.patient.flag).then(
              response =>{
                this.tableData = response;
               
              }
            )
          }
        },
      },
       
    mounted(){
      this.patient = {}
      this.patient.flag = 0
      this.getAllPatient();
      // getAllPatients().then(
      //   response =>{
      //     console.log(response);
      //     this.tableData = response;
      //   }
      // )
      // this.tableData.forEach((item)=>{
      //   console.log(item.flag)
      // })
    },
    components:{
      SearchAdd,
    }
}
</script>

<style scoped>

</style>

